<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/inc/taglibs.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>OA后台管理系统</title>
    <link rel="shortcut icon" href="${path }/res/images/Ologo.ico" type="image/x-icon" />

    <link rel="stylesheet" href="${path}/res/layui/css/layui.css" media="all" >
    <link rel="stylesheet" href="${path}/res/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="${path}/res/css/one-css/layout.css" media="all" />

</head>

<body>
<div class="layui-layout layui-layout-admin beg-layout-container">
    <div class="layui-header beg-layout-header">
        <div class="beg-layout-main beg-layout-logo">
            <a href="#" target="_blank" class="one-logo">OA系统</a>
        </div>
        <div class="beg-layout-main beg-layout-side-toggle" style="border-radius: 10%;">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
        <!--一级菜单-->
        <div class="beg-layout-main beg-layout-menu" id="menu">
            <ul class="layui-nav beg-layout-nav" lay-filter="">

            </ul>
        </div>
        <div class="beg-layout-main beg-layout-panel">
            <ul class="layui-nav beg-layout-nav" lay-filter="user">
                <li class="layui-nav-item">
                    <a href="javascript:;" data-tab="true" class="admin-side-full">
                        <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        全屏
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-tab="true" class="clearCache">
                        <i class="fa fa-trash-o" aria-hidden="true"></i>
                        清除缓存
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-tab="true" class="showNotice" id="showNotice">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i>
                        系统公告
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="beg-layou-head">
                        <shiro:principal property='name'/>
                        <img src="${path }<shiro:principal property='img'></shiro:principal>" class="layui-nav-img">
                        <span><%-- <shiro:principal property='loginName'/> --%></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" data-tab="true" data-url='https://www.layui.com/admin/std/dist/views/set/user/info.html'>
                                <i class="fa fa-user-circle" aria-hidden="true"></i>
                                <cite>个人信息</cite>
                            </a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-tab="true" data-url="https://www.layui.com/admin/std/dist/views/set/user/password.html">
                                <i class="fa fa-gear" aria-hidden="true"></i>
                                <cite>修改密码</cite>
                            </a>
                        </dd>
                        <dd>
                            <a id="logout" href="javascript:;">
                                <i class="fa fa-sign-out" aria-hidden="true"></i>
                                <cite>注销</cite>
                            </a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!--侧边导航栏-->
    <div class="layui-side beg-layout-side" >
        <div class="layui-side-scroll">
            <!-- 管理员信息      -->
            <div class="user-info">
                <div class="photo">
                    <img src="${path }<shiro:principal property='img'/>" alt="">
                </div>
                <p><shiro:principal property='loginName'/>您好！欢迎登录</p>
            </div>
            <ul class="layui-nav layui-nav-tree"  lay-filter="side" id="side">
            </ul>

        </div>

    </div>
    <!--内容区域-->
    <div class="layui-body beg-layout-body">
        <div class="layui-tab layui-tab-brief layout-nav-card" lay-filter="layout-tab" style="border: 0; margin: 0;box-shadow: none; height: 100%;">
            <ul class="layui-tab-title">
                <li class="layui-this">
                    <a href="javascript:;">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <cite>后台首页</cite>
                    </a>
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe src="${path }/toSysConsole"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!--页脚-->
    <div class="layui-footer beg-layout-footer">

    </div>
</div>

<script src="${path}/res/layui_menu/layui.js"></script>
<script src="${path}/res/js/layout.js"></script>
<script type="text/javascript">
    var path = "${path}";
</script>
<script>
    layui.config({
        base: '../res/js/'
    }).use(['element', 'layer', 'navbar', 'tab', 'common'], function() {
        var element = layui.element()
        $ = layui.jquery,
            layer = layui.layer,
            common = layui.common,
            navbar = layui.navbar(),
            tab = layui.tab({
                elem: '.layout-nav-card', //设置选项卡容器
                contextMenu:true
            });

        //iframe自适应
        $(window).on('resize', function() {
            var $content = $('.layout-nav-card .layui-tab-content');
            $content.height($(this).height() - 165);
            $content.find('iframe').each(function() {
                $(this).height($content.height());
            });
        }).resize();

        //初始化顶级菜单
        $.getJSON(path + '/getMenuTop?t=' + Math.random(), function(menuData) {
            $('#menu').html(getTopHtml(menuData));
            element.init();

            var $menu = $('#menu');
            $menu.find('li.layui-nav-item').each(function() {
                var $this = $(this);
                //绑定一级导航的点击事件
                $this.on('click', function() {
                    //获取设置的模块ID
                    var id = $this.find('a').data('module-id');
                    //这里的数据源只是演示时用的，实际需求可能通过远程读取（根据模块ID来获取对应模块的信息）
                    var url;

                    //设置数据源有两个方式。
                    //第一：在此页面通过ajax读取设置  举个栗子： 两个栗子都先留这边，可以根据自己情况修改
                    //---------这是第一个栗子----------
                    $.getJSON(path + '/getMenuByPidRec',{id:id},function(data){
                        navbar.set({
                            elem: '#side',
                            data: data
                        });
                        navbar.render();
                        navbar.on('click(side)', function(data) {
                            tab.tabAdd(data.field);
                        });
                    });


                });

            });

            //模拟点击顶级菜单的第一个菜单按钮
            $.getJSON(path + '/getTopMenuFirst?t=' + Math.random(), function(id) {
                $('.beg-layout-menu').find('a[data-module-id='+id+']').click();
            });

        });

        element.on('nav(user)', function(data) {
            var $a = data.children('a');
            if($a.data('tab') !== undefined && $a.data('tab')) {
                tab.tabAdd({
                    title: $a.children('cite').text(),
                    //icon: 'fa-user',
                    href: $a.data('url')
                });
            }
        });

        $('.beg-layout-side-toggle').on('click', function() {
            var sideWidth = $('.beg-layout-side').width();
            if(sideWidth === 200) {
                $('.beg-layout-body').animate({
                    left: '0'
                });
                $('.beg-layout-footer').animate({
                    left: '0'
                });
                $('.beg-layout-side').animate({
                    width: '0'
                });
            } else {
                $('.beg-layout-body').animate({
                    left: '200px'
                });
                $('.beg-layout-footer').animate({
                    left: '200px'
                });
                $('.beg-layout-side').animate({
                    width: '200px'
                });
            }
        });

        /*<li class="layui-nav-item layui-this">
            <a href="javascript:;" data-module-id="1">
                <i class="fa fa-desktop" aria-hidden="true"></i>
                <cite>内容管理</cite>
            </a>
        </li>*/


        //顶级菜单获取html字符串
        function  getTopHtml(data) {
            var ulHtml = '';
            ulHtml += '<ul class="layui-nav beg-layout-nav" lay-filter="">';
            for (var i = 0; i < data.length; i++) {
                if (i == 0) {
                    ulHtml += '<li class="layui-nav-item layui-this">';
                } else {
                    ulHtml += '<li class="layui-nav-item">';
                }
                ulHtml += '<a href="javascript:;" data-module-id="'+data[i].id+'">';
                ulHtml += '<i class="one-top-icon fa '+ data[i].icon+'" aria-hidden="true"></i>&nbsp;';
                ulHtml += '<cite>' + data[i].title + '</cite>';
                ulHtml += '</a>';
                ulHtml += '</i>';
            }
            ulHtml += '</ul>';
            return ulHtml;
        }

        //全屏
        $('.admin-side-full').on('click', function () {
            var docElm = document.documentElement;
            //W3C
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
            layer.msg('按Esc即可退出全屏');
        });

        //清除缓存
        $(".clearCache").click(function(){
            window.sessionStorage.clear();
            window.localStorage.clear();
            var index = layer.msg('清除缓存中，请稍候',{icon: 16,time:false,shade:0.8});
            setTimeout(function(){
                layer.close(index);
                layer.msg("缓存清除成功！");
            },1000);
        })

        //清除缓存
        $(".showNotice").click(function(){
            layer.open({
                type: 1,
                title: "系统公告", //不显示标题栏
                closeBtn: false,
                area: '310px',
                shade: 0.8,
                id: 'LAY_layuipro', //设定一个id，防止重复弹出
                btn: ['火速围观'],
                moveType: 1, //拖拽模式，0或者1
                content: '<div style="padding:15px 20px; text-align:justify; line-height: 22px; text-indent:2em;border-bottom:1px solid #e2e2e2;"><p>这是一个公告，可根据自己的要求修改，将会在后续版本增加公告管理。</p></div>',
                success: function(layero){
                    var btn = layero.find('.layui-layer-btn');
                    btn.css('text-align', 'center');
                    btn.on("click",function(){
                        window.sessionStorage.setItem("showNotice","true");
                    })
                    if($(window).width() > 432){  //如果页面宽度不足以显示顶部“系统公告”按钮，则不提示
                        btn.on("click",function(){
                            layer.tips('系统公告躲在了这里', '#showNotice', {
                                tips: 3
                            });
                        })
                    }
                }
            });

        })

        //退出
        $('#logout').on('click', function () {
            window.location.href=path + '/logout';
        })
    });
</script>
</body>
</html>